<template>
  <!-- 底部导航 -->
  <div
    class="footer-nav"
    :class="showHoverCom ? 'hover-com' : ''"
    v-show="popopData.show_type == 'nav' && popopData.is_show && navList.length"
    @click.stop="handleWidget(popopData)"
  >
    <div :style="moduleBgCss" class="module-bg"></div>
    <div
      class="nav-item"
      v-for="(nav, i) in navList"
      :key="i"
      @click="tabChange(nav, i)"
    >
      <div class="nav-img">
        <img
          v-if="nav.pic_url"
          :src="activeNav == i ? nav.active_url : nav.pic_url"
          alt=""
        />
      </div>
      <p
        :style="{
          color:
            activeNav == i
              ? popopData.params.activeColor
              : popopData.params.defaultColor,
        }"
      >
        {{ nav.nav_text }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    widgetList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    pageList: {
      type: Array,
      default: [],
    },
    systemPages: {
      type: Array,
      default: [],
    },
  },
  computed: {
    popopData() {
      let [item] = this.widgetList.filter((d) => {
        return d.show_type == "nav";
      });
      return item || {};
    },
    navList() {
      let [data] = this.widgetList.filter((d) => {
        return d.show_type == "nav";
      });
      return data.params.navList || [];
    },
    moduleBgCss() {
      let style = JSON.parse(JSON.stringify(this.popopData.moduleCss));
      if (!style.useBackground) {
        return {
          background: "inherit",
        };
      }
      return style;
    },
    showHoverCom() {
      let flag = false;
      if (this.$diyObser.store.currentComponent?.controlComName) {
        if (
          this.$diyObser.store.currentComponent.controlComName ==
          "widgetNavControl"
        ) {
          flag = true;
        }
      }
      return flag;
    },
  },
  data() {
    return {
      activeNav: 0,
    };
  },
  methods: {
    handleWidget(e) {
      console.log(e);
      this.$emit("chooseWidget", e);
      if (this.navList.length) {
        setTimeout(() => {
          this.$eventHub.$emit("widgetFootNavChange", {
            i: this.activeNav,
            nav: this.navList[this.activeNav],
          });
        }, 0);
      }
    },
    tabChange(nav, i) {
      this.activeNav = i;
      let link = nav.link;
      this.$eventHub.$emit("widgetFootNavChange", { i, nav });
      if (link?.link) {
        // 如果link.link中能够匹配出id，则为自定义diy页面；根据id匹配页面数据，并执行页面保存和切换
        if (link.link.indexOf("?id=") > -1) {
          let linkArr = link.link.split("?id=");
          let page_id = linkArr[linkArr.length - 1];
          console.log("页面id啊", page_id);
          let [page] = this.pageList.filter((d) => {
            return d.id == page_id;
          });
          console.log("要跳转的页面", page);
          if (page) this.$emit("handleTabChange", { item: page });
        } else {
          if (link.link == "/pages/home/home") {
            let [indexPage] = this.pageList.filter((d) => {
              return d.is_index == 1;
            });
            if (indexPage) this.$emit("handleTabChange", { item: indexPage });
          }
        }
      }
      // 如果link中有id字段，则为系统页面；根据id匹配页面数据，并执行页面保存和切换
      if (link?.id) {
        console.log("系统页面id啊", link?.id);
        let [page] = this.systemPages.filter((d) => {
          return d.id == link.id;
        });
        console.log("要跳转的系统页面", page);
        if (page) this.$emit("handleTabChange", { item: page });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.footer-nav {
  width: 376px;
  height: 50px;
  position: fixed;
  left: 0;
  bottom: -1px;
  z-index: 511;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0px -1px 3px #eeeeee;
  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    .nav-img {
      width: 20px;
      height: 20px;
    }
    img {
      width: 100%;
      height: 100%;
    }
    p {
      margin-top: 2px;
      font-size: 12px;
      color: #2e2d2d;
      margin-bottom: 0;
    }
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
.hover-com::before {
  content: "";
  width: 120%;
  height: 120%;
  position: absolute;
  top: -10%;
  left: -10%;
  border: 1px dashed;
  border-color: #000000;
  z-index: 2;
  display: inline-block;
  pointer-events: none;
  transform: scale(0.83);
}
</style>